<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%  
	String path = request.getContextPath();  
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="<%=basePath %>static/common/bootstrap/css/bootstrap.min.css">
		<link href="<%=basePath %>static/common/bootstrap/js/bootstarp-table-1.11.1/bootstrap-table.min.css" rel="stylesheet">
		<!-- jquery 文件 -->
		<script src="<%=basePath %>static/js/jquery-3.1.1.js"></script> 
		<!-- bootstrap。js 文件 -->
		<script src="<%=basePath %>static/common/bootstrap/js/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
		<!-- bootstarp-table 文件 -->
		<script src="<%=basePath %>static/common/bootstrap/js/bootstarp-table-1.11.1/bootstrap-table.min.js"></script>
		<script src="<%=basePath %>static/common/bootstrap/js/bootstarp-table-1.11.1/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<br/>
<div class="container table-responsive" >
<center>
<form action="<%=basePath %>querycouponactive" name="myform">
		
		<div class="form-group">
		     <table border="0" align="center">
		     <tr>
		     <td style="padding-right:5px">活动名称：</td>
		     <td style="padding-right:100px"><input type="text"  class="form-control" name="active_name" id="active_name1" value="${active.active_name}"/></td>
		     <td style="padding-right:5px">删除标志:</td>
		     <td style="padding-right:100px">
		     	<select class="form-control" name="is_del" id="is_del">
				  <option value="">请选择</option>
				  <option value="0" ${active.is_del==0?'selected':'' }>有效</option>
				  <option value="1" ${active.is_del==1?'selected':'' }>已删除</option>
				</select>
		     </td>
		     <td style="padding-right:100px">
				<input type="submit" class="btn btn-primary btn-sm" value="查询">
				<input type="button" class="btn btn-primary btn-sm" onclick="reset()" value="重置">
			</td>
		     </tr>
		     </table>
		 </div>	
</form> 



<button type="button" class="btn btn-primary btn-sm glyphicon glyphicon-download-alt" data-toggle="modal" data-target="#myModal2">添加</button>
</center>
	<form id="forms" method="post">
	<table class="table table-hover">
		<tr>
			<th style="text-align:left;">编号</th>
			<td>活动名称</td>
			<td>颜值劵数量</td>
			<td>每张券可兑换颜值</td>
			<td>已兑换数量</td>
			<td>剩余数量</td>
			<td>删除标志</td>
			<td>创建时间</td>
			<td colspan="2">操作</td>
		</tr>
		<c:forEach items="${list}" var="active" varStatus="s">
		<tr>
			<td align="left">${s.index+1 }</td>
			<td>${active.active_name}</td>
			<td>${active.beauty_num}</td>
			<td>${active.bond_num}</td>
			<td>${active.dhsl}</td>
			<td>${active.sysl}</td>
			<td>${active.is_del==0?'有效':'<font color="red">已删除</font>'}</td>
			<td>${active.create_time}</td>
			<td colspan="2" align="center">
				<c:if test="${active.is_del==1}">
					<button type="button" class="btn btn-primary btn-xs glyphicon glyphicon-search" data-toggle="modal" data-target="#myModal" onclick="querycouponrecord(${active.active_id})">查看礼券兑换码</button>
				</c:if>
				<c:if test="${active.is_del==0}">
					<button type="button" class="btn btn-primary btn-xs glyphicon glyphicon-search" data-toggle="modal" data-target="#myModal" onclick="querycouponrecord(${active.active_id})">查看礼券兑换码</button>
					<button type="button" class="btn btn-primary btn-xs glyphicon glyphicon-trash" onclick="updateactive(${active.active_id})">删除</button>
				</c:if>
				
			</td>
		</tr>
		</c:forEach>
	</table>
	
	<div class="layui-inline" align="center">
	  <a href="#" class="layui-btn layui-btn-normal" onclick="up()">上一页</a>
	  <a href="#" class="layui-btn layui-btn-normal" onclick="next()" >下一页</a>
	</div>
	</form>
	
	<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">礼券兑换码信息</h4>
      </div>
      <div class="modal-body">
        


		<form role="form">		
				<input type="hidden" name="page" id="page"/>
				兑换码：<input type="text"  class="form-control" name="cdkey" id="cdkey"/>
				兑换手机： <input type="text"  class="form-control" name="mobile" id="mobile"/>
				状态：
				<select class="form-control" name="status" id="status">
				  <option value="">请选择</option>
				  <option value="1">未兑换</option>
				  <option value="2">已兑换</option>
				  <option value="3">已失效</option>
				</select>
				<button type="button" class="btn btn-primary btn-sm" id="zhcxBtn">综合查询</button>
				<input type="button" class="btn btn-primary btn-sm" onclick="reset2()" value="重置">
		</form> 
               
        
		<table id="table" class="table text-nowrap">
		
		</table>


      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>
	
	
	<!-- Modal -->
	<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	        <h4 class="modal-title" id="myModalLabel">新增活动礼券信息</h4>
	      </div>
	      <div class="modal-body">
	        
	        
	        
	        
			<form class="form-horizontal" role="form" action="<%=basePath%>insertactive">
				<div class="form-group">
				    <label for="inputEmail3" class="col-sm-4 control-label">活动名称：</label>
				    <div class="col-sm-8">
				      <input type ="text"  class="form-control" id="active_name" name="active_name" >
					</div>
			    </div></br>		  
			  <div class="form-group" >
				    <label for="beauty_num" class="col-sm-4 control-label">美研劵数量:</label>
				    <div class="col-sm-6" >
				      <input type ="number" min="0" max="10000000"  class="form-control" id="beauty_num"  name="beauty_num">
				    </div>
			  </div><br>
			  <div class="form-group" >
				    <label for="bond_num" class="col-sm-4 control-label">每张可兑换颜值数量:</label>
				    <div class="col-sm-6" >
				      <input type ="number" min="0" max="10000000"  class="form-control" id="bond_num"  name="bond_num">
				    </div>
			  </div><br>
			  <div class="modal-footer">
		        <button type="button" class="btn btn-primary glyphicon glyphicon-remove" data-dismiss="modal">关闭</button>
		        <input type="submit" class="btn btn-primary glyphicon glyphicon-ok" value="生成美研券"/>
		      </div>
			</form>	
	      </div>
	      
	    </div>
	  </div>
	</div>
	
	
</div>
</body>
</html>
<script>
	function updateactive(active_id){
		console.log(active_id);
		if(window.confirm("删除礼券信息，未兑换的礼券将失效，你确认要删除该礼券信息吗？")){
			window.location.href="<%=basePath%>updateactive/"+active_id;
		}
	}
	var actid=0;
	function querycouponrecord(id){
		 actid=id;
		 $('#table').bootstrapTable("refresh");
		 $("#zhcxBtn").on("click",function(){
				$('#table').bootstrapTable("refresh");			
			});
	}
	
	$('#table').bootstrapTable({
	    url: '<%=basePath%>querycouponrecordbyid',
	    pagination: true,//是否显示分页
		   sidePagination:'client', //服务器分页
		   pageNumber:1,
		   pageSize: 10,//每页的记录行数
		   pageList: [10,20,30],	//可供选择的每页的行数	
		   queryParams:function(params){
		    	return {
		    		active_id:actid,
		    		cdkey:$("#cdkey").val(),
		    		mobile:$("#mobile").val(),
		    		status:$("#status").val()
		    	}
		    },
	    columns: [{
	        field: 'cdkey',
	        title: '兑换码'
	    }, {
	        field: 'mobile',
	        title: '兑换手机'
	    }, {
	        field: 'status',
	        title: '状态',
	        formatter : function(value,
					row, index) {
				if(row.status==1){
					return "未兑换";
				};
				if(row.status==2){
					return "<font color='green'>已兑换</font>";
				};
				if(row.status==3){
					return "<font color='red'>已失效</font>";
				};
			}
	    }, {
	        field: 'exchange_time',
	        title: '兑换时间'
	    }, {
	        field: 'create_time',
	        title: '创建时间'
	    }, ]
	});
	
	//重置
	function reset(){
		console.log($("#active_name").val());
		console.log($("#is_del").val());
		$("#active_name").val('');
		$("#is_del").val('');
	};	
	//清空下拉框
	function reset1(){
		$("#active_name").val('');
		$("#beauty_num").val('');
		$("#bond_num").val('');
	};	
	$('#myModal2').on('hidden.bs.modal', function (e) {
	 	reset1();
	})
	function reset2(){
		$("#cdkey").val('');
		$("#mobile").val('');
		$("#is_del").val('');
	};
	$('#myModal').on('hidden.bs.modal', function (e) {
	 	reset2();
	})
	
	
	
	function fenye(page){
		document.getElementById("page").value=page;
		document.myform.submit();
	}
	
	//上一页
	function up(){
		forms.action="<%=basePath%>querycouponactive?page=${info.prePage}";
		forms.submit();
	};
	//下一页
	function next(){
		forms.action="<%=basePath%>querycouponactive?page=${info.nextPage}";
		forms.submit();
	};
</script>